<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="div01">{{msg}}</div>
			<button @click="test">测试</button>
		</div>

		<script>
			const vm = Vue.createApp({
				// 提供模型M
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三"
					}
				},
				// 提供自定义方法
				methods:{
						test(){
							this.msg = "哈哈！"
						}
				},
				// 生命周期
				beforeCreate(){
					console.log("1. beforeCreate() 被执行")
					console.log(this.msg);
					// VM还没有被创建好
				},
				created(){
					console.log("2. created() 被执行")
					console.log(this.msg);
				},
				beforeMount()
				{
					console.log("3. beforeMount() 被执行")
					// ???
					console.log(document.getElementById("app").innerText);
				},
				mounted()
				{
					console.log("4. mounted() 被执行")
					console.log(document.getElementById("app").innerText);
				},
				beforeUpdate()
				{
					console.log("5. beforeUpdate() 被执行")
					console.log(document.getElementById("div01").innerText);
				},
				updated()
				{
					console.log("6. updated() 被执行")
					console.log(document.getElementById("div01").innerText);
				}
				,
				beforeDestory()
				{
					console.log("7. beforDestory() 被执行")
				},
				destory()
				{
					console.log("8. destory() 被执行")
				}
			})
			vm.mount("#app");
		</script>
	</body>
</html>
